<template>
    <component is="a-modal" v-model:visible="visible" width="80%" :title="title" :mask-closable="false"
        :ok-loading="loading" @cancel="close" @before-ok="submit">
        <div style="height: 70vh;overflow-y: scroll;">
            <a-table ref="crudRef" :data="tableData" :columns="columns" :pagination="false" :stripe="false">

            </a-table>
            <a-pagination class="pagination" @change="pageChange" @page-size-change="limitChange" :total="total"
                :show-total="true" :current="searchForm.page" :page-size="searchForm.limit" show-total show-jumper
                show-page-size />
        </div>
    </component>
</template>
<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import memberApi from '@/api/system/member'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import tool from '@/utils/tool'
const emit = defineEmits(["success"]);
const visible = ref(false);
const title = ref('')
const crudRef = ref()
const tableData = ref([])
const loading = ref(false);
const searchForm = ref({
    page: 1,
    limit: 10
})
const total = ref(0)
const formData = reactive({
    id: '',
})
const columns = reactive([
    { title: 'ID', dataIndex: 'id', width: 100 },
    { title: 'UID', dataIndex: 'user_id', width: 180 },
    { title: '积分', slotName: 'integral', width: 240 },
    { title: '数量', dataIndex: 'num', width: 180 },
    { title: '类型', dataIndex: 'action_text', width: 180 },
    { title: '详情', dataIndex: 'msg', width: 180 },
    { title: '创建时间', dataIndex: 'create_time', width: 180 },
])
const getData = async () => {
    const { data } = await memberApi.balanceLog(searchForm.value, formData.id)
    tableData.value = data.data
    total.value = data.total
}
const open = async (data) => {
    console.log('111', data);
    title.value = data.user_id + '的兑换积分 余額为' + data.balance
    formData.id = data.id
    visible.value = true;
    getParams()
    getData()
}
const pageChange = (page) => {
    searchForm.value.page = page;
    getData()
};
const limitChange = (limit) => {
    searchForm.value.limit = limit;
    searchForm.value.page = 1
    getData()
};
const paramsData = ref({})
const getParams = async () => {
    const { data } = await memberApi.integral_asset_list_params()
    paramsData.value = { ...data }
}
defineExpose({ open });
</script>
<style lang="less" scoped>
.pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>